<template>
  <div v-if="dialogFormVisible">
    <el-dialog
      :visible.sync="dialogFormVisible"
      :title="title"
      destroy-on-close
      v-on="$listeners"
      @close="onClose"
    >
      <el-row :gutter="6">
        <el-form
          ref="form"
          :model="formData"
          :rules="rules"
          size="small"
          label-width="100px"
        >
          <el-col :span="24">
            <el-form-item label="名称" prop="name">
              <el-input
                v-model="formData.name"
                placeholder="请输入名称"
                :maxlength="100"
                show-word-limit
                clearable
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="生态类" prop="category">
              <el-select
                v-model="formData.category"
                placeholder="请输入生态类"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in categotyOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="10">
            <el-form-item label="目" prop="order">
              <el-select
                v-model="formData.order"
                placeholder="请选择目"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in orderOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="9">
            <el-form-item label="科" prop="family">
              <el-select
                v-model="formData.family"
                placeholder="请选择科"
                clearable
                :style="{ width: '100%' }"
              >
                <el-option
                  v-for="item in familyOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="状态" prop="state">
              <el-radio-group v-model="formData.state" size="medium">
                <el-radio-button
                  v-for="item in stateOptions"
                  :key="item.id"
                  :label="item.id"
                >
                  {{ item.name }}
                </el-radio-button>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="19">
            <el-form-item label="习性" prop="habitat">
              <el-input
                v-model="formData.habitat"
                type="textarea"
                placeholder="请输入习性"
                :autosize="{ minRows: 4, maxRows: 4 }"
                :style="{ width: '100%' }"
              ></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="19">
            <el-form-item v-if="imageUrl !== ''" label="原封面">
              <el-image
                :src="imageUrl"
                fit="cover"
                style="width: 100px; height: 100px"
              ></el-image>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="上传" required>
              <el-upload
                ref="imageId"
                :action="uploadAction"
                :before-upload="beforeUpload"
                :on-success="uploadSuccess"
                list-type="picture-card"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="分布地区" prop="provinces">
              <el-select
                v-model="formData.provinces"
                placeholder="请选择下拉选择"
                clearable
                :style="{ width: '100%' }"
                multiple
              >
                <el-option
                  v-for="item in provincesOptions"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="描述" prop="description">
              <WangEditor
                ref="editor"
                :value="editorValue"
                @change="editorChange"
              />
            </el-form-item>
          </el-col>
        </el-form>
      </el-row>
      <div slot="footer">
        <el-button @click="close">取消</el-button>
        <el-button type="primary" @click="handelConfirm">确定</el-button>
      </div>
    </el-dialog>
  </div>
</template>
<script>
  import { getOptionForAddBird, addBird, updateBird } from '@/api/bird'
  import WangEditor from '@/components/wangEditor/index'
  export default {
    components: {
      WangEditor,
    },
    inheritAttrs: false,
    props: [],
    data() {
      return {
        //控制对话框开关
        dialogFormVisible: false,
        //弹出层标题
        title: '',
        //展示原来的图片开关
        showImage: false,
        formData: {
          id: undefined,
          name: undefined,
          category: undefined,
          order: undefined,
          family: undefined,
          state: undefined,
          habitat: undefined,
          imageId: undefined,
          provinces: [],
          description: '',
        },
        imageUrl: '',
        editorValue: '',
        //	表单验证
        rules: {
          name: [{ required: true }],
          category: [{ required: true }],
          habitat: [{ required: true }],
          order: [{ required: true }],
          family: [{ required: true }],
          state: [{ required: true }],
          provinces: [{ required: true }],
        },
        //上传接口
        uploadAction: 'http://localhost:8081/uploadImage',
        orderOptions: [],
        familyOptions: [],
        stateOptions: [],
        provincesOptions: [],
        categotyOptions: [],
      }
    },
    computed: {},
    watch: {},
    created() {
      //  获取选项的所有信息
      getOptionForAddBird().then((res) => {
        this.orderOptions = res.data.birdOrder
        this.familyOptions = res.data.birdFamily
        this.categotyOptions = res.data.birdCategory
        this.stateOptions = res.data.birdState
        this.provincesOptions = res.data.provinces
      })
    },
    mounted() {},
    methods: {
      showEdit(row) {
        if (!row) {
          this.title = '添加'
        } else {
          this.title = '编辑'
          //将后台传的数据传递弹出层
          this.formData.id = row.id
          this.formData.category = row.category.id
          this.formData.description = row.description
          this.formData.habitat = row.habitat
          this.formData.family = row.family.id
          this.imageUrl = row.image.url
          this.formData.imageId = row.image.id
          this.formData.name = row.name
          this.formData.order = row.order.id
          this.formData.state = row.state.id
          for (let i = 0; i < row.address.length; i++) {
            this.formData.provinces.push(row.address[i].id)
          }
        }
        this.dialogFormVisible = true
        // this.showImage = false
        // this.showImage = true
        this.editorValue = this.formData.description
      },
      //关闭弹窗
      onClose() {
        this.clearForm()
      },
      //取消操作
      close() {
        this.clearForm()
        this.onClose()
        //
        this.$message.success('操作取消')
      },
      //提交信息
      handelConfirm() {
        console.log(this.formData)
        this.$refs.form.validate((valid) => {
          if (this.formData.imageId === undefined) {
            this.$message.error('没有上传封面')
          } else {
            if (this.formData.description === '') {
              this.$message.error('没有输入描述内容')
            } else {
              if (valid) {
                //判断是添加还是修改
                if (this.title === '添加') {
                  //  访问添加接口
                  addBird(this.formData).then((res) => {
                    this.$message.success(res.msg)
                    //  提交完成后清除信息
                    this.clearForm()
                    // 关闭弹窗
                    this.dialogFormVisible = !this.dialogFormVisible
                    //  刷新表格
                    this.$emit('fetchData')
                  })
                } else {
                  //  访问修改接口
                  updateBird(this.formData).then((res) => {
                    this.$message.success(res.msg)
                    //  提交完成后清除信息
                    this.clearForm()
                    // 关闭弹窗
                    this.dialogFormVisible = !this.dialogFormVisible
                    //  刷新表格
                    this.$emit('fetchData')
                  })
                }
              } else {
                // return false
                this.$message.error('您还有内容没有完成')
              }
            }
          }
        })
      },
      //图片上传
      beforeUpload(file) {
        //上传之前检查图片大小
        let isRightSize = file.size / 1024 / 1024 < 20
        if (!isRightSize) {
          this.$message.error('文件大小超过 20MB')
        }
        return isRightSize
      },
      //图片上传完成
      uploadSuccess(res, file) {
        this.$message.success(res)
        this.$message.success('上传图片成功')
        this.formData.imageId = res.data.id
      },
      //  富文本编辑器内容修改
      editorChange(h) {
        this.formData.description = h
      },
      //  充值表单数据
      clearForm() {
        this.formData = {
          id: undefined,
          name: undefined,
          category: undefined,
          order: undefined,
          family: undefined,
          state: undefined,
          habitat: undefined,
          imageId: undefined,
          provinces: [],
          description: '',
        }
        this.$refs.form.resetFields()
        this.imageUrl = ''
        this.editorValue = ''
        this.$refs.editor.clearHTML()
      },
    },
  }
</script>
<style>
  .el-upload__tip {
    line-height: 1.2;
  }
</style>
